<template>
  <el-card :body-style="{ padding: 0 }" class="table-container" shadow="never">
    <slot name="tableConfig"></slot>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      :stripe="tableConfig.stripe"
      :border="tableConfig.border"
      :row-key="tableConfig.tree && tableConfig.tree.rowKey"
      :tree-props="
        tableConfig.tree ? { children: tableConfig.tree.children } : {}
      "
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="!tableConfig.tree && tableConfig.multiSelect"
        type="selection"
        align="center"
      />
      <!-- <el-table-column
        v-if="tableConfig.index"
        label="序号"
        type="index"
        width="60"
      /> -->
      <el-table-column align="center" label="序号" fixed="left" width="60">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        v-if="!tableConfig.tree && !tableConfig.multiSelect"
        :label="tableConfig.label"
        align="center"
      /> -->
      <template v-for="(item, index) in tableColumns">
        <el-table-column
          v-if="item.prop && !item.show"
          :key="index"
          :min-width="item.minWidth || 100"
          :width="item.width"
          :label="item.label"
          :prop="item.prop"
          :sortable="item.sortable"
          :stripe="true"
          show-overflow-tooltip
          :align="item.align || 'left'"
        >
          <template #default="{ row }">
            <template v-if="item.type === 'Render'">
              <render :render="item.render" :item="item" :row="row" />
            </template>
            <template v-else-if="item.type === 'Date' || item.type === 'Month'">
              <span>{{ row[item.prop] }}</span>
            </template>
            <template v-else-if="item.type === 'img'">
              <img :src="row[item.prop]" alt="" width="60" height="60" />
            </template>
            <template v-else-if="item.type === 'Datetime'">
              <span>{{ row[item.prop] }}</span>
            </template>
            <template v-else-if="item.type === 'icon'">
              <span>
                 <el-icon
                v-if="item.prop"
                size="20"
                style="font-size: 16px"
                color="var(--el-color-primary)"
              >
                <component :is="row[item.prop]" />
              </el-icon>
              </span>
            </template>
            <template v-else>
              <el-button
                v-if="item.cellClick"
                type="text"
                @click="item.cellClick(row[item.prop], row)"
              >
                {{
                  // eslint-disable-next-line vue/no-deprecated-filter
                  item.formatter
                    ? item.formatter(row[item.prop], row)
                    : row[item.prop]
                }}
              </el-button>
              <span v-else>
                {{
                  // eslint-disable-next-line vue/no-deprecated-filter
                  item.formatter
                    ? item.formatter(row[item.prop], row)
                    : row[item.prop]
                }}
              </span>
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        v-if="tableOperations.length"
        label="操作"
        fixed="right"
        :width="tableOperations.length * 100"
        align="center"
      >
        <template #default="{ row }">
          <div class="operations--wrapper flex-center">
            <template
              v-for="(
                { icon, text, handler, isShow, type, code,disabled }, index
              ) in tableOperations"
            >
              <el-button
                plain
                size="small"
                :icon="icon"
                :type="type"
                :disabled="disabled ? disabled(row) : false"
                perPage="mini"
                :key="index + 'key'"
                v-if="isShow ? isShowed(code) : true"
                @click="() => handler(row)"
              >
                <i v-if="icon" :class="icon"></i>
                <span v-if="text">{{ text }}</span>
              </el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
import { defineComponent, toRef } from "vue";
import { isShowed } from "@/utils/index";

export default defineComponent({
  name: "TableBody",
  components: {
    render: {
      props: {
        render: "",
        item: "",
        row: "",
      },
      render(h: any) {
        const params = this.item;
        const { row } = this;
        return this.render(h, row, params);
      },
    },
  },
  props: {
    tableData: {
      required: true,
      type: Array,
      default: () => [],
    },
    tableLoading: {
      required: true,
      type: Boolean,
      default: true,
    },
    // 列表配置
    tableConfig: {
      required: true,
      type: Object,
      default: () => ({
        // 基础配置相关
        stripe: true, //斑马纹
        border: false, //边框
        // operationWidth: 120, // table 操作栏 宽度
        // 多选相关
        multiSelect: false, // 是否多选，默认不多选
        selectChange: null, // 多选事件 selection => this.handleMultiSelect(selection)
        // 树形列表
        tree: {
          rowKey: "id",
          children: "children",
        },
        // 非树形、非多选、序号
        label: "",
      }),
    },
    // 列表显示项
    tableColumns: {
      required: true,
      type: Array,
      default: () => [],
    },
    // 列表操作项配置
    tableOperations: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const tableConfig = toRef(props, "tableConfig");
    // 多选
    const handleSelectionChange = (val: any) => {
      tableConfig.value.selectChange && tableConfig.value.selectChange(val);
    };
    
    return {
      handleSelectionChange,
      isShowed,
    };
  },
});
</script>
<style lang="scss" scoped>
.table-container {
  margin: 0px 0;
  padding: 5px;
}
</style>
